<template>
	<view style="background-color: #e1e1e1; height: 100%;">
		<view style="display: flex; background-color: #f4f4f4; padding: 20px; border-radius: 10px;">
			<view style="width: 90px; margin-right: 10px;">
				<image src="@/static/pep4a.jpg" style="width: 100%;height:120px;border-radius:5px;"></image>
			</view>
			<!--课本信息-->
			<view style="flex:1;">
				<view style="display: flex;">
					<view style="flex: 1; font-size: 18px; font-weight: bold;">四年级 上册</view>
				</view>
				<view style="margin-top: 10px;">
					人教版(PEP)
				</view>
				<view>
					中国人民教育出版社
				</view>
				<view style="margin-top:28px;">
					单词量:{{count}}
				</view>
			</view>
	    </view>
		
		<view style="padding: 10px;">
			<view v-for="(item,index) in list" style="display:flex;margin: 10px; background-color: #fff; line-height: 50px; height: 50px; padding:2px 12px; border-radius: 5px;" @click="handleViewWords(index,item)">
				<view style="font-weight: bold;">{{item.title}}</view>
				<view style="height:12px; margin:10px;padding:0px 10px;flex: 1; border-bottom: 1px dotted #bababa;"></view>
				<view>单词数({{item.count}})</view>
				<view style="margin:16px 5px"><u-icon name="arrow-right"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:300,
				list:[
					{id:1,title:'Unit 1 Welcome',count:20},
					{id:2,title:'Unit 2 Happy Family',count:22},
					{id:3,title:'Unit 3 At the zoo',count:32},
					{id:1,title:'Unit 4 New Year',count:38},
					{id:1,title:'Start Unit 1',count:42},
					{id:1,title:'Unit 1 Welcome',count:20},
					{id:2,title:'Unit 2 Happy Family',count:22},
					{id:3,title:'Unit 3 At the zoo',count:32},
					{id:1,title:'Unit 4 New Year',count:38},
					{id:1,title:'Start Unit 1',count:42},
					{id:1,title:'Unit 1 Welcome',count:20},
					{id:2,title:'Unit 2 Happy Family',count:22},
					{id:3,title:'Unit 3 At the zoo',count:32},
					{id:1,title:'Unit 4 New Year',count:38},
					{id:1,title:'Start Unit 1',count:42},
				]
			}
		},
		methods: {
			handleViewWords(index,data){
				uni.navigateTo({
					url:'/pages/wordlist/view'
				})
			}
		}
	}
</script>

<style>

</style>
